<template>
  <view class="page">
    <u-navbar @leftClick="navLeftClick" :fixed="false" title="好友列表" placeholder bgColor="#fff"></u-navbar>
    <view class="list" v-if="list.length">
      <view class="item" v-for="item in list" :key="item.id">
        <view class="u-flex">
          <image style="width: 80rpx;height: 80rpx;margin-right: 26rpx;" :src="item.avatar" mode="aspectFill" />
          <text>{{ item.nickName }}</text>
        </view>
        <view>{{ item.createdTime }}</view>
      </view>
    </view>
    <a-empty v-else></a-empty>
  </view>
</template>

<script>
import { getUserList } from '@/api/index'

export default {
  data() {
    return {
      pagesNum: 1,
      pages: 1,
      list: [],
    };
  },
  onLoad() {
    this.getPage()
  },
  methods: {
    getPage() {
      uni.showLoading({ mask: true })
      getUserList({ pageSize: 200, pageNum: this.pagesNum, invitationBy: uni.getStorageSync('userInfo').invitationCode }).then(res => {
        uni.hideLoading()
        this.list = [...this.list, ...res.rows]
        this.pages = Math.ceil(res.total / 200)
      })
    },
  },
  onReachBottom() {
    if(this.pagesNum < this.pages) {
      this.pagesNum++
      this.getPage()
    }
  }
};
</script>

<style lang="scss" scoped>
.page {
  width: 750rpx;
  min-height: 100vh;
  background-color: #F5F5F5;
  padding-bottom: 80rpx;
  position: relative;
  .list {
    display: flex;
    flex-direction: column;
    gap: 12rpx;
    width: 702rpx;
    margin: 0 auto;
    margin-top: 12rpx;
    .item {
      width: 100%;
      background-color: #fff;
      border-radius: 12rpx;
      padding: 20rpx 24rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 28rpx;
      color: #000000;
    }
  }
}
</style>
